<template>
	<view class="page">
		<view class="bejing"></view>
		<view class="header_box">
			<block v-for="(item,index) in list" :key="index">
				<view class="header_box_flex">
				<view>
					{{item.name}}
				</view>
				<view>
					{{item.value}}
				</view>
				</view>
			</block>
		</view>
		<view class="value_text">
			<text>兑换步骤详情：请联系左下角客服进行兑换哦！</text>
		</view>
		<view class="bottom_box">
			<view class="bottom_box1">
				<view class="xiangiang_img">
				<image src="/static/jifenxiang-xiang/kefu.png" style="width: 100%;height: 100%;" ></image>
				</view>
				<text>联系客服</text>
			</view>
			<view class="bottom_box2">
				联系客服报单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				list:[{name:'积分数',id:0,value:'50000'},{name:'兑换商品',id:0,value:'1次/月'},{name:'兑换次数',id:0,value:'交通利群卡（年限20w）'},{name:'兑换次数',id:0,value:'1次/月'}]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		position: relative;
	}
	.bejing{
		background: url(/static/jifenxiang-xiang/jifenbejing.png) no-repeat;
		background-size: 100% 100%;
		width: 750rpx;
		height:394rpx;
	}
	.header_box{
		position: absolute;
		height:348rpx;
		width: 687.4rpx;
		background-color: #fff;
		border-radius: 10rpx;
		top: 363rpx;
		left: 32rpx;
		.header_box_flex{
			height:87.1rpx ;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 21rpx;
			border-bottom:1rpx solid #ccc;
		}
		.header_box_flex:last-child{
			border: 0 !important;
		}
	}
	.value_text{
		position: absolute;
		top: 749rpx;
		left:43rpx;
	}
	.bottom_box{
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		height: 120rpx;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		.bottom_box1{
			flex: 2.7;
			background-color: #fff;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.bottom_box2{
			flex: 4.3;
			background-color:#1953F7;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}
	}
	.xiangiang_img{
		width:42rpx ;
		height: 42rpx;
	}
</style>
<style>
	page{
		background-color: #f1f1f1 !important;
	}
</style>